<template>
  <div v-if="replies.length" class="Replies">
    <p class="Replies_top">{{ replies.length }} 回复</p>
    <ul>
      <li
        v-for="(v, i) of replies"
        :key="i"
        :id="v.origin_id"
        :ref="'#' + v.origin_id"
      >
        <div class="Replies_content">
          <router-link :to="'/user/' + v.user.username">
            <img :src="v.user.avatar" alt="" />
          </router-link>
          <p style="float: left">
            {{ v.user.username }}
            <a :href="'#' + v.origin_id">
              <span class="Replies_content_p_span"
                >{{ i + 1 }}楼•{{ analysisTime(v.created_at) }}</span
              >
            </a>
          </p>
          <span v-if="id == v.user.id" class="Replies_content_span">作者</span>
        </div>
        <br />
        <div
          v-html="v.content"
          class="markdown-body Replies_content_content"
        ></div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: ["replies", "id"],
  data() {
    return {};
  },
  methods: {
    analysisTime(time) {
      const _d1 = new Date();
      const dateDiffer = Math.abs(_d1.getTime() - time);
      //准换年
      const year = Math.floor(dateDiffer / (1000 * 60 * 60 * 24 * 365));
      //取余数
      const years = dateDiffer % (1000 * 60 * 60 * 24 * 365);
      //将余数转换成月
      const month = Math.floor(years / (1000 * 60 * 60 * 24 * 30));
      //将余数转换成天
      const day = Math.floor(years / (1000 * 60 * 60 * 24));
      //取余数
      const hours = years % (1000 * 60 * 60 * 24);
      //将余数转换小时
      const hour = Math.floor(hours / (1000 * 60 * 60));
      // console.log(year,month,day,hour);
      if (year > 0) {
        return year + "年前";
      } else if (month > 0) {
        return month + "个月前";
      } else if (day > 0) {
        return day + "天前";
      } else if (hour > 0) {
        return hour + "小时前";
      } else {
        return "1小时之前";
      }
    },
    to(toEl) {
      // toEl 为指定跳转到该位置的DOM节点
      let bridge = toEl;
      let body = document.body;
      let height = 0; // 计算该 DOM 节点到 body 顶部距离
      do {
        height += bridge.offsetTop;
        bridge = bridge.offsetParent;
      } while (bridge !== body); // 滚动到指定位置
      window.scrollTo({ top: height, behavior: "instant" });
    },
  },
  updated() {
    if (this.$refs[this.$route.hash]) this.to(this.$refs[this.$route.hash][0]);
  },
};
</script>

<style>
.Replies {
  width: 100%;
  margin-bottom: 13px;
}
.Replies ul {
  list-style: none;
  background: #fff;
}
.Replies ul li {
  padding: 10px 10px 0 10px;
  border-top: 1px solid #f0f0f0;
}
.Replies_top {
  height: 40px;
  background: #f6f6f6;
  border-radius: 3px 3px 0 0;
  padding: 10px;
  color: #444;
  font-size: 14px;
}
.Replies_content {
  font-size: 12px;
}
.Replies_content_span {
  color: #fff;
  background-color: #6ba44e;
  padding: 2px;
  font-size: 12px;
  margin-left: 4px;
  float: left;
}
.Replies_content img {
  width: 30px;
  height: 30px;
  border-radius: 3px;
  margin-right: 10px;
  float: left;
}
.Replies_content_p_span {
  color: #08c;
  font-size: 11px;
  margin-left: 5px;
}
.Replies_content_p_span:hover,
.Replies_content_content a:hover {
  text-decoration: underline;
}
.Replies_content_content {
  padding: 0px 0px 15px 50px;
}
.Replies_content_content a {
  color: #08c;
}
</style>